<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">{{isEdit ? '编辑健康指标' : '添加健康指标'}}</view>
            <view class="right">
                <u-icon name="checkmark" size="32" color="#333" @click="saveIndicator"></u-icon>
            </view>
        </view>
        
        <!-- 指标信息 -->
        <view class="section">
            <view class="title">指标信息</view>
            <view class="form">
                <view class="form-item">
                    <view class="label">指标名称</view>
                    <input 
                        type="text" 
                        v-model="indicator.name" 
                        placeholder="请输入指标名称"
                        class="input"
                    />
                </view>
                
                <view class="form-item">
                    <view class="label">指标值</view>
                    <input 
                        type="text" 
                        v-model="indicator.value" 
                        placeholder="请输入指标值"
                        class="input"
                    />
                </view>
                
                <view class="form-item">
                    <view class="label">单位</view>
                    <input 
                        type="text" 
                        v-model="indicator.unit" 
                        placeholder="请输入单位"
                        class="input"
                    />
                </view>
                
                <view class="form-item">
                    <view class="label">记录时间</view>
                    <picker 
                        mode="time" 
                        :value="indicator.time" 
                        @change="timeChange"
                    >
                        <view class="picker">{{indicator.time || '请选择时间'}}</view>
                    </picker>
                </view>
            </view>
        </view>
        
        <!-- 历史记录 -->
        <view class="section" v-if="isEdit">
            <view class="title">历史记录</view>
            <view class="chart">
                <canvas 
                    type="2d" 
                    id="historyChart" 
                    class="chart-canvas"
                ></canvas>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isEdit: false,
            indicator: {
                name: '',
                value: '',
                unit: '',
                time: '',
                data: []
            }
        }
    },
    onLoad(options) {
        if (options.id) {
            this.isEdit = true
            // 模拟加载数据
            this.indicator = {
                name: '血压',
                value: '120/80',
                unit: 'mmHg',
                time: '08:00',
                data: [
                    { time: '03-10', value: '125/85' },
                    { time: '03-11', value: '122/82' },
                    { time: '03-12', value: '118/78' },
                    { time: '03-13', value: '120/80' },
                    { time: '03-14', value: '115/75' },
                    { time: '03-15', value: '120/80' }
                ]
            }
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        timeChange(e) {
            this.indicator.time = e.detail.value
        },
        saveIndicator() {
            // 表单验证
            if (!this.indicator.name) {
                uni.showToast({
                    title: '请输入指标名称',
                    icon: 'none'
                })
                return
            }
            if (!this.indicator.value) {
                uni.showToast({
                    title: '请输入指标值',
                    icon: 'none'
                })
                return
            }
            if (!this.indicator.unit) {
                uni.showToast({
                    title: '请输入单位',
                    icon: 'none'
                })
                return
            }
            if (!this.indicator.time) {
                uni.showToast({
                    title: '请选择记录时间',
                    icon: 'none'
                })
                return
            }
            
            // 保存记录
            uni.showToast({
                title: '保存成功',
                icon: 'success'
            })
            setTimeout(() => {
                this.goBack()
            }, 1500)
        },
        initChart() {
            if (!this.isEdit) return
            
            const query = uni.createSelectorQuery().in(this)
            query.select('#historyChart')
                .fields({ node: true, size: true })
                .exec((res) => {
                    const canvas = res[0].node
                    const ctx = canvas.getContext('2d')
                    
                    // 设置canvas尺寸
                    const dpr = uni.getSystemInfoSync().pixelRatio
                    canvas.width = res[0].width * dpr
                    canvas.height = res[0].height * dpr
                    ctx.scale(dpr, dpr)
                    
                    // 绘制图表
                    this.drawChart(ctx, this.indicator.data)
                })
        },
        drawChart(ctx, data) {
            const width = 300
            const height = 200
            const padding = 20
            
            // 清空画布
            ctx.clearRect(0, 0, width, height)
            
            // 绘制坐标轴
            ctx.beginPath()
            ctx.moveTo(padding, padding)
            ctx.lineTo(padding, height - padding)
            ctx.lineTo(width - padding, height - padding)
            ctx.strokeStyle = '#E8E8E8'
            ctx.stroke()
            
            // 绘制数据点
            const xStep = (width - 2 * padding) / (data.length - 1)
            const yMin = Math.min(...data.map(item => parseFloat(item.value)))
            const yMax = Math.max(...data.map(item => parseFloat(item.value)))
            const yRange = yMax - yMin
            const yStep = (height - 2 * padding) / yRange
            
            ctx.beginPath()
            data.forEach((item, index) => {
                const x = padding + index * xStep
                const y = height - padding - (parseFloat(item.value) - yMin) * yStep
                
                if (index === 0) {
                    ctx.moveTo(x, y)
                } else {
                    ctx.lineTo(x, y)
                }
                
                // 绘制数据点
                ctx.beginPath()
                ctx.arc(x, y, 3, 0, Math.PI * 2)
                ctx.fillStyle = '#1890FF'
                ctx.fill()
                
                // 绘制时间标签
                ctx.font = '12px sans-serif'
                ctx.fillStyle = '#666'
                ctx.textAlign = 'center'
                ctx.fillText(item.time, x, height - padding + 15)
            })
            
            // 绘制折线
            ctx.strokeStyle = '#1890FF'
            ctx.lineWidth = 2
            ctx.stroke()
        }
    },
    onReady() {
        this.initChart()
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .section {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .title {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 20rpx;
        }
        
        .form {
            .form-item {
                display: flex;
                align-items: center;
                padding: 20rpx 0;
                border-bottom: 2rpx solid #F7F7FA;
                
                &:last-child {
                    border-bottom: none;
                }
                
                .label {
                    width: 160rpx;
                    font-size: 28rpx;
                    color: #333;
                }
                
                .input {
                    flex: 1;
                    font-size: 28rpx;
                    color: #333;
                }
                
                .picker {
                    flex: 1;
                    font-size: 28rpx;
                    color: #333;
                }
            }
        }
        
        .chart {
            height: 300rpx;
            padding: 20rpx;
            
            .chart-canvas {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style> 